<template>
  <div class="main-page">
    <div class="page-header">
      <div class="page-header-title">辽宁省房地产市场监测系统 —— 监测预警</div>
      <div class="page-header-filtrate">
        <public-change-province-city :cityList="mapList" :currentCity="cityObj.code" @changeCity="changeCity" />
        <month-range-time-filtrate-public class="page-header-filtrate-month-range" :month-range="monthRange" @changeFiltrateTime="changeMonthRange" />
      </div>
      <div class="bcak-home-btn" @click="goBackHomePage()">返回首页</div>
    </div>
    <div class="main-content">
      <div class="page-header-title1">核心指标</div>
      <el-row :gutter="30">
        <!-- 新建商品住宅销售价格指数 -->
        <el-col :span="6">
          <div class="module-item dominance-inventory-sales-cycle">
            <div class="module-item-title">
              <span>新建商品住宅销售价格指数</span>
              <el-tabs v-model="listInd1" class="module-item-title-tabs" @tab-change="changeTab($event, 'listInd1')">
                <el-tab-pane
                  v-for="(item, index) of currentMonthAccumulationTabs"
                  :key="item.value"
                  :label="item.label"
                  :name="item.value"
                ></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getMonitorSalePriceData, 5, -5)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getMonitorSalePriceData).length > 0"
                :housingSupplyStatsData="personHouseData.getMonitorSalePriceData"
                :max="5"
                :min="-5"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 住宅地价动态监测指数 -->
        <el-col :span="6">
          <div class="module-item recessiveness-inventory-sales-cycle">
            <div class="module-item-title">
              <span>住宅地价动态监测指数</span>
              <el-tabs v-model="listInd2" class="module-item-title-tabs" @tab-change="changeTab($event, 'listInd2')">
                <el-tab-pane
                  v-for="(item, index) of currentMonthAccumulationTabs"
                  :key="item.value"
                  :label="item.label"
                  :name="item.value"
                ></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData, 5, -5)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                :max="5"
                :min="-5"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 二手住宅销售价格指数 -->
        <el-col :span="6">
          <div class="module-item broad-sense-inventory-sales-cycle">
            <div class="module-item-title">
              <span>二手住宅销售价格指数</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData, 5, -5)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                :max="5"
                :min="-5"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 住宅租赁价格指数 -->
        <el-col :span="6">
          <div class="module-item broad-sense-inventory-sales-cycle">
            <div class="module-item-title">
              <span>住宅租赁价格指数</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData, 5, -5)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                :max="5"
                :min="-5"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="page-header-title1">参考指标</div>
      <el-row :gutter="30">
        <!-- 商品住宅新开工面积同比增长率 -->
        <el-col :span="6">
          <div class="module-item dominance-inventory-sales-cycle">
            <div class="module-item-title">
              <span>商品住宅新开工面积同比增长率</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getMonitorXkgAreaData, 35, -35)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getMonitorXkgAreaData).length > 0"
                :housingSupplyStatsData="personHouseData.getMonitorXkgAreaData"
                :max="35"
                :min="-35"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 住宅用地异常交易情况 -->
        <el-col :span="6">
          <div class="module-item recessiveness-inventory-sales-cycle">
            <div class="module-item-title">
              <span>住宅用地异常交易情况</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData, null, null)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                :max="null"
                :min="null"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 新增个人住房贷款同比增长率 -->
        <el-col :span="6">
          <div class="module-item broad-sense-inventory-sales-cycle">
            <div class="module-item-title">
              <span>新增个人住房贷款同比增长率</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData, 30, -30)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                :max="30"
                :min="-30"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 新增个人住房贷款与住房成交金额的比值 -->
        <el-col :span="6">
          <div class="module-item broad-sense-inventory-sales-cycle">
            <div class="module-item-title">
              <span>新增个人住房贷款与住房成交金额的比值</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData, 60, null)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                :max="60"
                :min="null"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <!-- 新建商品住宅销售面积同比增长率 -->
        <el-col :span="6">
          <div class="module-item dominance-inventory-sales-cycle">
            <div class="module-item-title">
              <span>新建商品住宅销售面积同比增长率</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getMonitorSaleAreaData, 35, -35)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getMonitorSaleAreaData).length > 0"
                :housingSupplyStatsData="personHouseData.getMonitorSaleAreaData"
                :max="35"
                :min="-35"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 二手住宅销售面积同比增长率 -->
        <el-col :span="6">
          <div class="module-item recessiveness-inventory-sales-cycle">
            <div class="module-item-title">
              <span>二手住宅销售面积同比增长率</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData, 35, -35)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                :max="35"
                :min="-35"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 房地产贷款余额占金融机构人民币各项贷款余额的比值 -->
        <el-col :span="6">
          <div class="module-item broad-sense-inventory-sales-cycle">
            <div class="module-item-title">
              <span>房地产贷款余额占金融机构人民币各项贷款余额的比值</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData, 35, null)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                :max="35"
                :min="null"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 房地产贷款余额新增占金融机构人民币各项贷款余额新增的比值 -->
        <el-col :span="6">
          <div class="module-item broad-sense-inventory-sales-cycle">
            <div class="module-item-title">
              <span>房地产贷款余额新增占金融机构人民币各项贷款余额新增的比值</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData, 35, null)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                :max="35"
                :min="null"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <!-- 外地居民购房套数占总购房套数比值（占比） -->
        <el-col :span="6">
          <div class="module-item dominance-inventory-sales-cycle">
            <div class="module-item-title">
              <span>外地居民购房套数占总购房套数比值（占比）</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData, null, null)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                :max="null"
                :min="null"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 外地居民购房套数占总购房套数比值（环比） -->
        <el-col :span="6">
          <div class="module-item recessiveness-inventory-sales-cycle">
            <div class="module-item-title">
              <span>外地居民购房套数占总购房套数比值（环比）</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData, null, null)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                :max="null"
                :min="null"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 房地产相关税收占地方一般公共预算收入的比值 -->
        <el-col :span="6">
          <div class="module-item broad-sense-inventory-sales-cycle">
            <div class="module-item-title">
              <span>房地产相关税收占地方一般公共预算收入的比值</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData, 30, null)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                :max="30"
                :min="null"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <!-- 住房空置率 -->
        <el-col :span="6">
          <div class="module-item broad-sense-inventory-sales-cycle">
            <div class="module-item-title">
              <span>住房空置率</span>
            </div>
            <div class="module-item-content">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData, 15, 5)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                :max="15"
                :min="5"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 点击放大 type表示是放大的图  其他根据自己组件调整-->
    <el-dialog v-model="personHouseData.dialogVisible" width="60%">
      <component
        :is="personHouseData.componentName"
        v-if="personHouseData.dialogVisible"
        :housingSupplyStatsData="personHouseData.componentParams"
        :max="personHouseData.max"
        :min="personHouseData.min"
        :type="1"
        :style="{ height: pxToRem(500) + 'px' }"
      ></component>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import barLinePbulic from "@/components/propertyWatch/barLinePbulicJcyj.vue";
export default {
  components: { barLinePbulic },
};
</script>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import publicChangeProvinceCity from "@/components/housePropertyDevelopmentConstruction/publicChangeProvinceCity.vue";
import monthRangeTimeFiltratePublic from "@/components/housePropertyDevelopmentConstruction/timeFiltratePublic.vue";
import { getMonitorSaleArea, getMonitorSalePrice, getMonitorXkgArea } from "@/api/propertyWatchJcyj";
import { barLineParamsData } from "@/utils/chartsPbulic";
import usePropertyAlertResale from "@/hooks/propertyWatchJcyj/usePropertyWatchJcyj";
import { pxToRem } from "@/utils/index";
const personHouseData = usePropertyAlertResale();
const monthRange = ref<any>(null); // 月范围筛选
const route = useRoute();
const router = useRouter();
const jiaData = ref<any>({
  yAxis: [],
  xAxis: [],
});
const listInd1 = ref(1);
const listInd2 = ref(1);
const ecFun = (data: any, _getData: any) => {
  let legendStyle = {
    show: false,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "0%",
    bottom: "5%",
    top: "12%",
  };
  let paramsData = barLineParamsData(
    ["同比增长率"],
    data.xAxis,
    [
      {
        name: "",
        type: "2",
      },
    ],
    [
      {
        name: "line",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.yAxis],
    [
      {
        a: "#1FB7FF",
        b: "#1FB7FF",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData[_getData] = paramsData;
};
const ecFun1 = (data: any, _getData: any) => {
  let legendStyle = {
    show: false,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "0%",
    bottom: "5%",
    top: "12%",
  };
  let paramsData = barLineParamsData(
    ["环比增长率"],
    data.xAxis,
    [
      {
        name: "",
        type: "2",
      },
    ],
    [
      {
        name: "line",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.yAxis],
    [
      {
        a: "#1FB7FF",
        b: "#1FB7FF",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData[_getData] = paramsData;
};

// 切换
const changeTab = (event: any, module: string) => {
  if (module == "listInd1") {
    listInd1.value = event;
    getMonitorSalePriceFun();
  }
};

// 新建商品住宅销售面积同比增长率
const getMonitorSaleAreaFun = async () => {
  let { data } = await getMonitorSaleArea({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0],
    endTime: monthRange.value[1],
  });
  jiaData.value = data;
  ecFun(data, "getMonitorSaleAreaData");
};
// 商品住宅新开工面积同比增长率
const getMonitorXkgAreaFun = async () => {
  let { data } = await getMonitorXkgArea({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0],
    endTime: monthRange.value[1],
  });
  ecFun(data, "getMonitorXkgAreaData");
};
//新建商品住宅销售价格指数
const getMonitorSalePriceFun = async () => {
  let { data } = await getMonitorSalePrice({
    xzqhdm: cityObj.value.code,
    startTime: monthRange.value[0],
    endTime: monthRange.value[1],
    type: listInd1.value,
  });
  if (listInd1.value == 1) {
    ecFun(data, "getMonitorSalePriceData");
  } else {
    ecFun1(data, "getMonitorSalePriceData");
  }
};
// 其他
const getDevelopInvestmentFun = async () => {
  jiaData.value.yAxis = jiaData.value.yAxis.map(() => 0);
  ecFun(jiaData.value, "getDevelopInvestmentData");
};

const allFun = async () => {
  await getMonitorSaleAreaFun();
  await getMonitorXkgAreaFun();
  await getMonitorSalePriceFun();
  await getDevelopInvestmentFun();
};

const cityObj = ref<any>({
  name: "",
  code: "210000",
}); // 地图-城市code信息
const mapList = ref<any>([
  { name: "辽宁省", code: "210000" },
  { name: "沈阳市", code: "210100" },
  { name: "大连市", code: "210200" },
  { name: "鞍山市", code: "210300" },
  { name: "抚顺市", code: "210400" },
  { name: "本溪市", code: "210500" },
  { name: "丹东市", code: "210600" },
  { name: "锦州市", code: "210700" },
  { name: "营口市", code: "210800" },
  { name: "阜新市", code: "210900" },
  { name: "辽阳市", code: "211000" },
  { name: "盘锦市", code: "211100" },
  { name: "铁岭市", code: "211200" },
  { name: "朝阳市", code: "211300" },
  { name: "葫芦岛市", code: "211400" },
]);
const currentMonthAccumulationTabs = [
  // 当月&累计tabs
  {
    label: "同比",
    value: 1,
  },
  {
    label: "环比",
    value: 2,
  },
];

// 放大图片
const fullSc = (componentName: any, componentParams: any, max: any, min: any) => {
  console.log(componentName, componentParams);
  personHouseData.dialogVisible = true;
  personHouseData.componentName = componentName;
  personHouseData.componentParams = componentParams;
  personHouseData.max = max;
  personHouseData.min = min;
};

// 返回首页
const goBackHomePage = () => {
  router.go(-1);
};

// 模块切换城市
const changeCity = (cityCode: any) => {
  cityObj.value.code = cityCode;
  allFun();
};

// 月范围筛选
const changeMonthRange = (val: any) => {
  monthRange.value = [val[0], val[1]];
  allFun();
};

onMounted(() => {
  if (route && route.query) {
    cityObj.value.code = route.query?.xzqhdm;
    monthRange.value = [route.query?.startTime, route.query?.endTime];
  }
  allFun();
});
</script>

<style scoped lang="less">
.h263 {
  height: 165px !important;
}
.page-header-title1 {
  font-size: 18px;
  color: #a6edff;
  line-height: 60px;
  text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
}
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyDevelopmentConstruction/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100px;
    background-image: url("@/assets/img/housePropertyDevelopmentConstruction/header-bg.png");
    background-size: 100% 100%;

    &-title {
      position: absolute;
      left: 50px;
      font-size: 35px;
      color: #a6edff;
      text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
    }

    &-filtrate {
      position: relative;
      display: flex;
      align-items: center;
      top: 15px;
      left: 150px;

      .filtrate-city {
        width: 120px;

        /deep/ .el-select__wrapper {
          font-size: 15px;
        }

        margin-right: 30px;
      }

      .page-header-filtrate-month-range {
        /deep/ .el-range-input,
        /deep/ .el-range-separator {
          font-size: 15px;
          font-weight: lighter;
        }
      }
    }

    .bcak-home-btn {
      position: absolute;
      top: 52px;
      right: 50px;
      font-size: 20px;
      color: #7bebed;
      cursor: pointer;
    }
  }

  .main-content {
    padding: 0 20px;

    > .el-row:not(:last-child) {
      margin-bottom: 30px;
    }

    .module-item {
      width: 100%;
      height: 190px !important;
      &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-header-bg.png");
        background-size: 100% 100%;

        > span {
          font-size: 15px;
          color: white;
          margin-left: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &-tabs {
          position: absolute;
          right: 50px;
        }
      }

      &-content {
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-content-bg.png");
        background-size: 100% 100%;
        position: relative;

        .module-item-chart-tabs {
          position: absolute;
          right: 0;
          top: 5px;
        }
      }
    }
  }
}

:deep(.el-tabs) {
  display: flex;
  align-items: center;

  .el-tabs__header {
    margin: 0;
  }

  .el-tabs__nav-wrap:after {
    height: 0;
  }

  .el-tabs__active-bar {
    height: 0;
  }

  .el-tabs__item {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 12px;
    height: 20px;
    cursor: pointer;
    color: white;
    background: rgb(9, 31, 63);
  }

  .el-tabs__item.is-active {
    background: #2187f4;
  }
}

/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__title {
    font-size: 30px;
    color: white;
  }

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }
}
</style>
